/**
 * @file Clock
 * @author leon <ludafa@outlook.com>
 */

@require '../css/variable.styl'

.sm-time-picker-clock
    position: relative
    width: 260px
    height: @width
    background-color: rgba(0, 0, 0, .07)
    border-radius: 50%
    cursor: default;

    &-number
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-style: normal;
        left: -16px
        top: -16px
        border-radius: 50%

        &.state-selected
            color: #fff
            background-color: $md-colors.blue500;

        &.variant-round-1
            font-size: 14px

        &.variant-round-2
            font-size: 12px

    &-pointer
        position: absolute;
        top: 130px
        left: 130px
        width: 1px
        height: 130px
        background-color: $md-colors.blue500
        transform-origin: top left;

        &.variant-minute

            &:after
                content: ' '
                position: absolute;
                width: 10px
                height: @width
                bottom: -(@width + 1)px
                left: -(@width / 2)px
                border-radius: 50%
                border-width: 1px
                border-color: $md-colors.blue500
                border-style: solid
                background-color #fff
